<template>
	<view>
		<!-- 轮播图区域 -->
		<u-swiper :list="list1"></u-swiper>
		<!-- 导航区域 -->

		<view class="u-grid">
			<view class="u-grid-item" v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
				<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="baseListItem.name" :size="40"></u-icon>
				<text class="grid-text">{{ baseListItem.title }}</text>
			</view>
		</view>
		<!-- 导航 -->
		<u-sticky bgColor="#fff">
			<u-tabs :scrollable="true" :activeStyle="{ color: '#FF9933', fontWeight: 'bold', fontSize: '35rpx' }"
				lineColor="#FF9933" :list="list2" @change="tabsChange"></u-tabs>
		</u-sticky>
		<view class="property-list" v-for="(item,index) in 20" :key="index">
			<Bargain v-if="tabsIndex==0" @click="click"></Bargain>
			<New v-if="tabsIndex==1" @click="click"></New>
			<SecondHand v-if="tabsIndex==2" @click="click"></SecondHand>
		</view>
	</view>
</template>

<script>
	import Bargain from "../../components/Bargain.vue"; // 引入新组件
	import New from "../../components/New.vue"; // 引入新组件
	import SecondHand from "../../components/SecondHand.vue"; // 引入新组件
	export default {
		components: {
			Bargain, // 注册新组件
			New,
			SecondHand
		},
		data() {
			return {
				tabsIndex: 0,
				list2: [{
						name: "特价房",
					},
					{
						name: "新房",
					},
					{
						name: "二手房",
					},
				],
				list1: [
					"https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
					"https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
					"https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
				],
				baseList: [{
						name: "/static/index/new.png",
						title: "新房",
					},
					{
						name: "/static/index/second-hand.png",
						title: "二手房",
					},
					{
						name: "/static/index/Bargain-price.png",
						title: "特价房",
					},
				],
				imageSrc: "https://images.unsplash.com/photo-1631049552057-403cdb8f0658?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80",
				propertyTitle: "出售县城三室两厅两卫118平米 售价100万",
				propertyArea: "建筑面积110平米",
				propertyTags: ["繁华地段", "繁华地段"],

			};
		},
		methods: {
			tabsChange(value) {
				console.log(value)
				this.tabsIndex = value.index
			}
		}
	};
</script>

<style lang="scss">
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		box-sizing: border-box;
	}

	.u-grid {
		display: flex;

		.u-grid-item {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;
		}
	}

	.property-list {
		padding: 10rpx 25rpx;

		background: #fff;

	}
</style>